<template>
  <!-- 滚动区域开始 -->
  <z-paging
    ref="paging"
    @scroll="handleScroll"
    :scroll-with-animation="true"
  >
    <!-- 骨架屏 -->
    <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>

    <template #top>
      <!-- 自定义导航组件 -->
      <CustomNavbar />
    </template>

    <!-- 轮播图组件 -->
    <TridentFreshSwiper :banners="bannerList" />

    <CategoryPanel :hotCategories="hotCategoryList"/>

    <!-- 推荐区域 -->
    <Recommend :recommends="recommendList"/>

    <!-- 热卖榜区域 -->
    <Hot :hots="hotList"/>

  </z-paging>
  <!-- 滚动区域结束 -->

  <!-- 返回顶部 -->
  <TridentFreshBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script setup lang="ts">
import { ref, inject, reactive } from 'vue'
import { onShow } from "@dcloudio/uni-app"

import { useCartStore } from "@/stores"

// 导入接口
import { reqGetBannersAPI, reqGetCategoryListAPI } from "@/apis/category"
import { reqGetRecommendAPI } from "@/apis/recommend"
import { reqGetGoodsListAPI } from "@/apis/goods"

// 导入数据类型
import type { BannerItem, CategoryItem } from "@/types/home"
import type { GoodsItem } from "@/types/goods"

// 导入自定义组件
import CustomNavbar from './componets/CustomNavbar.vue'
import CategoryPanel from './componets/CategoryPanel.vue'
import Recommend from './componets/Recommend.vue'
import Hot from './componets/Hot.vue'



// ----------------- 定义全局变量开始 -----------------
const paging = ref()

// 购物车存储
const cartStore = useCartStore()

// 全局属性
const global: any = inject('global')
// ----------------- 定义全局变量结束 -----------------



// ----------------- 定义骨架变量开始 -----------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive([
    {
        type: 'custom',
        num: 1,
        style: 'height:310rpx;',
    },
    40,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;'
        }
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;'
        },
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;'
        }
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;'
        },
      ]
    },
    40,
    40,
    {
      type: 'custom',
      num: 1,
      style: 'width: 96%;height: 80rpx;margin: 0 auto;'
    },
    40,
    {
        type: 'flex',
        num: 3,
        style: 'padding: 0 20rpx;',
        children: [
            {
                type: 'line',
                num: 1,
                style: 'width: 98%;height:460rpx;margin-right: 10%',
            },
            {
                type: 'line',
                num: 1,
                style: 'width: 98%;height:460rpx;',
            },
        ]
    },
])
// ----------------- 定义骨架变量结束 -----------------




// ----------------- 返回顶部功能开始 -----------------

// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
    paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
    isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// ----------------- 返回顶部功能结束 -----------------


onShow(async () => {
  isShowSkeleton.value = true
  await Promise.all([
    getBannerList(),
    getCategoryList(),
    getRecommendList(),
    getHotList()
  ])

  isShowSkeleton.value = false
})



// ------------------- 获取数据开始 -------------------
// 轮播图列表【已使用类型】
const bannerList = ref<BannerItem[]>([])

// 热门分类列表【已使用类型】
const hotCategoryList = ref<CategoryItem[]>([])

// 推荐列表【已使用类型】
const recommendList = ref<GoodsItem[]>([])

// 热卖榜【已使用类型】
const hotList = ref<GoodsItem[]>([])

// 获取轮播图数据【已使用类型】
const getBannerList = async () => {
  const result = await reqGetBannersAPI({type: 3})
  bannerList.value = result.data.banners != null ? result.data.banners : []
}


// 获取推荐商品【已使用类型】
const getRecommendList = async () => {
  const result = await reqGetRecommendAPI({top_cid: global.CID, page_size: 8})
  recommendList.value = result.data.goods != null ? result.data.goods : []
}

// 获取热卖商品【已使用类型】
const getHotList = async () => {
  const result = await reqGetGoodsListAPI({top_cid: global.CID, page_size: 8, goods_label_id: 4})
  hotList.value = result.data.goods != null ? result.data.goods : []
}


// 获取分类数据【已使用类型】
const getCategoryList = async () => {
  const result = await reqGetCategoryListAPI({pid: global.CID})
  hotCategoryList.value = result.data.categories != null ? result.data.categories : []
}
// ------------------- 获取数据结束 -------------------
</script>

<style lang="scss">
</style>
